<template>
<div class="addBox">
  <el-button text @click="dialogFormVisible = true">
     添加目录
    </el-button>
  
    <el-dialog v-model="dialogFormVisible" title="添加目录" style="width: 500px;">
      <el-form :model="form" :rules="rules" prop="catalogueName" >
        <el-form-item label="目录名称 :" :label-width="formLabelWidth" prop="catalogueName">
          <el-input v-model="form.catalogueName" autocomplete="off" placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="开课时间 :" :label-width="formLabelWidth" prop="DateValue">
            <el-date-picker
        v-model="form.DateValue"
        type="date"
        placeholder="请选择日期"
      />
        </el-form-item>


      </el-form>
      <template #footer>
        <span class="dialog-footer">
          
          <el-button type="primary" @click="dialogFormVisible = false">

           确认
          </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
</div>
  </template>
  
  <script  setup>
  import { reactive, ref } from 'vue'
  
  const dialogFormVisible = ref(false)
  const formLabelWidth = '140px'
  
  const form = reactive({
    catalogueName: '',
    DateValue:''
  })

  const rules = reactive({
    catalogueName: [
    { required: true, message: '请输入目录名称', trigger: 'blur' },
    { min: 3, max: 5, message: '字符长度2-5', trigger: 'blur' },
  ],
  DateValue:[
  { required: true, message: '请选择日期', trigger: 'blur' },
  ]
 
  })
  
  </script>
  <style scoped>
  .el-button--text {
    margin-right: 15px;
  }
  .addBox{
    min-height: 600px;
  }

  .el-input {
    width: 200px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
  </style>
  